@()(implicit session: Session)
@config.main("GO Enrichment") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("GO Enrichment")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">

                       @components.species("3")

                        @components.textarea("Enter gene id", "id", "id", "getExample()",placeholder="Paste GeneID(s) here.")

                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                            Run</button>
                    </div>
                </form>

                <div id="result" style="display: none;">
                    <hr>
                    <h5 class="result-title">Result:</h5>

                    <ul class="nav nav-tabs px-4" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="rTable-tab" data-toggle="tab" href="#ul-rTable" role="tab"
                            aria-controls="ul-rTable" aria-selected="true">GO Table</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="img-tab" data-toggle="tab" href="#ul-img" role="tab"
                            aria-controls="ul-img" aria-selected="true">GO Enrich Image</a>
                        </li>
                    </ul>

                    <div class="tab-content py-0 px-0">
                        <div class="tab-pane fade show active" id="ul-rTable" role="tabpanel"
                        aria-labelledby="rTable-tab" style="width: 100%">
                            <table class="table table-bordered table-all" id="table"
                            data-page-list="[10, 25, 50, 100, all]"  data-pagination="true"
                            data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all">
                            </table>
                        </div>

                        <div class="tab-pane fade" id="ul-img" role="tabpanel"
                        aria-labelledby="img-tab">
                            <div style="display: flex">
                                <img  style="width: 50%" id="img1"/>
                                <img  style="width: 50%" id="img2"/>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

            $(function () {
                formValidation();
                $("#table").bootstrapTable({
                    columns: [
                        {
                            field: "0",
                            title: "ID",
                            sortable: "true",
                            searchType: "text",
                            formatter: function (value, rows) {
                                return `<a href="http://amigo.geneontology.org/amigo/term/${value}" target="_blank">${value}</a>`
                            }
                        }, {
                            field: "1",
                            title: "Description",
                            sortable: "true",
                            searchType: "text"
                        }, {
                            field: "2",
                            title: "Namespace",
                            sortable: "true",
                            searchType: "num"

                        }, {
                            field: "3",
                            title: "Ratio In Study",
                            sortable: "true",
                            searchType: "num"
                        }, {
                            field: "4",
                            title: "Ratio In Pop",
                            sortable: "true",
                            searchType: "text",
                        },
                        {
                            field: "5",
                            title: "P Value",
                            sortable: "true",
                            searchType: "text",
                        },
                        {
                            field: "6",
                            title: "Fdr",
                            sortable: "true",
                            searchType: "text",
                        },
                        {
                            field: "7",
                            title: "Input",
                            sortable: "true",
                            searchType: "text",
                            formatter:function (value) {
                                let genes = []
                                value.split("|").forEach(v => {
                                    genes.push(`<a href="/COADB/browse/genePage/${v}" target="_blank">${v}</a>`)
                                })
                                return genes
                            }
                        }
                    ]
                })
            })

            function Search() {

                let form = $("#form");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();

                    $.ajax({
                        url: "@routes.ToolsController.toolsRun("go")",
                        type: "post",
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        data: new FormData($("#form")[0]),
                        success: function (data) {
                            if (data.valid === "false") {
                                swal("Error", data.msg, "error");
                            } else {
                                let $table = $(`#table`)
                                $table.bootstrapTable("load", data.table)
                               $("#img1").attr("src", "data:image/png;base64," + data.img1);
                               $("#img2").attr("src", "data:image/png;base64," + data.img2);
                                const $result = $("#result");
                                $result.show()
                                let target_top = $result.offset().top - 80;
                                $("html,body").animate({scrollTop: target_top}, 800);
                            }
                            layer.close(index)
                        }
                    });
                }
            }

            function getExample() {
                let species = $("#species").val()
                $.post("/COADB/example/getGeneIdsExample/" +species,(data)=>{
                    $(`#id`).val(data)
                })
            }

            function formValidation() {
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        id: {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                }
                            }
                        }
                    }
                });
            }



    </script>
}